<!--
 * @Author: your name
 * @Date: 2020-08-22 01:51:42
 * @LastEditTime: 2020-08-27 17:05:41
 * @LastEditors: 000
 * @Description: In User Settings Edit
 * @FilePath: \exam-list\src\components\checkpaper\PaperDetail.vue
-->
<template>
  <div>
    <!--表单-->
    <el-card class="box-card">
    <el-form ref="form" :model="form" label-width="80px"> 
      <el-form-item label="状态">
        <el-select v-model="form.region" placeholder="请选择状态">
          <el-option label="已阅" value="yiyue"></el-option>
          <el-option label="未阅" value="weiyue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级">
        <el-select v-model="form.classroom" placeholder="请选择对应班级">
          <el-option label="1701B" value="rom1"></el-option>
          <el-option label="1610C" value="rom2"></el-option>
           <el-option label="1610A" value="rom3"></el-option>
          <el-option label="1611A" value="rom4"></el-option>
           <el-option label="1611B" value="rom5"></el-option>
          <el-option label="1609B" value="rom6"></el-option>
           <el-option label="1609A" value="rom7"></el-option>
          <el-option label="1610B" value="rom8"></el-option>
           <el-option label="1701C" value="rom9"></el-option>
          <el-option label="1612A" value="rom10"></el-option>
           <el-option label="1612B" value="rom11"></el-option>
          <el-option label="1701E" value="rom12"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="form.classroom">查询</el-button>
      </el-form-item>
    </el-form>
    </el-card>
    <!--表格-->
    <el-card class="box-card">
      <p>试卷列表</p>
      <el-table :data="examlist" stripe style="width: 100%" :header-cell-style="headClass">
        <el-table-column prop="id" label="班级"  align="center">1701B</el-table-column>
        <el-table-column prop="student_name" label="姓名"  align="center"></el-table-column>
        <el-table-column prop="status" label="阅卷状态" align="center" >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0" type="danger">未阅</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="start_time" label="开始时间"  align="center"></el-table-column>
        <el-table-column prop="end_time" label="结束时间"  align="center"></el-table-column>
        <el-table-column prop="subject_id" label="成材率" align="center">—</el-table-column>
        <el-table-column prop="action" label="操作"  align="center">
          <el-button
          size="mini"
          @click="handleExam()" style="color:blue">批卷</el-button>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getExamList } from '@/api/management'
export default {
  data() {
    return {
      form: {
        region: '',
        classroom: ''
      },
      examlist: []
    }
  },
  created(){
    this.getExamstudent()
  },
  methods: {
    headClass() { // 表头居中显示
      return 'text-align:center'
    },
    async getExamstudent(){
      const { data:res } = await getExamList()
      console.log(res)
      this.examlist = res.exam
    },
    handleExam() {
      this.$router.push('/home/checkPaperManage/paper/class')
    }
  }
}
</script>

<style>
.box-card{
  margin-top: 30px;
}
.el-form{
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 850px;
  margin-left: 100px;
}
p{
  margin-left: 30px;
  margin-bottom: 20px;
}
</style>
